<template>
  <div class="module3">
    <el-card
      class="box-card"
      :body-style="{ padding: '18px 0px 5px', boxSizing: 'border-box' }"
    >
      <el-row class="title">
        <el-col :span="6">
          <el-tabs v-model="platform" :stretch="true" @tab-click="handleClick">
            <el-tab-pane label="全部数据" name="all" class="tac"></el-tab-pane>
            <el-tab-pane label="手游" name="h5" class="tac"></el-tab-pane>
            <el-tab-pane label="页游" name="pc" class="tac"></el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col :span="17" class="ml40">
          <el-date-picker
            v-model="query.startDate"
            type="date"
            placeholder="选择日期"
            @input="getTimerData(1, $event)"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
          <el-date-picker
            class="ml20"
            v-model="query.endDate"
            type="date"
            placeholder="选择日期"
            @input="getTimerData(2, $event)"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-col>
      </el-row>
      <el-table :data="tableData" height="336" v-loading="loading">
        <el-table-column label="序号" width="60" prop="index" fixed>
        </el-table-column>
        <el-table-column prop="ct" label="渠道" width="120" fixed>
          <template slot-scope="scope">
            <a target="_blank" style="color: #409eff">
              {{
                scope.row.ct
                  ? "页游-" + scope.row.ct
                  : "手游-" + scope.row.clearing_type_display
              }}
            </a>
          </template>
        </el-table-column>
        <el-table-column sortable prop="cos" label="消耗"> </el-table-column>
        <el-table-column sortable prop="income" label="充值金额">
        </el-table-column>
        <el-table-column sortable prop="reg" label="注册量"> </el-table-column>
        <el-table-column sortable prop="reg_price" label="注册单价">
        </el-table-column>
        <el-table-column sortable prop="active_price" label="活跃单价">
        </el-table-column>
        <el-table-column sortable prop="pay_nums" label="充值人数">
        </el-table-column>
        <el-table-column sortable prop="pay_price" label="付费单价">
        </el-table-column>
        <el-table-column sortable prop="income_rate" label="回款率">
          <template slot-scope="scope">
            <div>
              {{ scope.row.income_rate ? scope.row.income_rate + "%" : 0 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column sortable prop="profit" label="毛利"> </el-table-column>
        <el-table-column sortable prop="income7_rate" label="7日回款率">
          <template slot-scope="scope">
            <div>
              {{ scope.row.income7_rate ? scope.row.income7_rate + "%" : 0 }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 查询
      query: {
        startDate: new Date().toLocaleString().substr(0, 10),
        endDate: new Date().toLocaleString().substr(0, 10),
      },
      platform: "all",
      flag: false,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now(); //不可以选择今天之后的日期
        },
      },
      endDate: new Date().toLocaleString().substr(0, 10),
      tableData: [], // 表格主数据
      fullscreenLoading: false,
      loading: false,
    };
  },
  created() {
    this.query.endDate = this.getIndexDay(1);
    this.query.startDate = this.getIndexDay(1);
    this.getState();
  },
  mounted() {},
  methods: {
    handleClick(tab, event) {
      this.platform = tab.name;
      this.getState();
    },
    // 获取指定多少天之前的时间
    getTimerData(flag, data) {
      let formatData = this.toDate(data);
      if (flag === 1) {
        this.query.startDate = formatData;
      } else {
        this.query.endDate = formatData;
      }
      this.getState();
    },
    // 获取
    getState() {
      this.fullscreenLoading = true;
      if (this.platform == "all") {
        let task = [this.getWyState(), this.getWebState()];
        Promise.all(task).then((res) => {
          this.tableData = res[0].concat(res[1]);
          this.initTableData();
        });
      } else if (this.platform == "h5") {
        this.getWyState().then((res) => {
          this.tableData = res;
          this.initTableData();
        });
      } else {
        this.getWebState().then((res) => {
          this.tableData = res;
          this.initTableData();
        });
      }
    },
    initTableData() {
      this.fullscreenLoading = false;
      this.tableData.map((obj, i) => {
        obj.index = i + 1;
        obj.reg_price = obj.reg_price
          ? obj.reg_price
          : obj.reg == 0
          ? 0
          : parseFloat((obj.cos / obj.reg).toFixed(2));
        obj.active_price = obj.active_price
          ? obj.active_price
          : obj.actives == 0
          ? 0
          : parseFloat((obj.cos / obj.actives).toFixed(2));
        obj.pay_price = obj.pay_price
          ? obj.pay_price
          : obj.pays == 0
          ? 0
          : parseFloat((obj.cos / obj.pays).toFixed(2));
        obj.income_rate = obj.income_rate
          ? obj.income_rate
          : obj.cos == 0
          ? 0
          : parseFloat((obj.income / obj.cos).toFixed(2));
        obj.income7_rate = obj.income7_rate
          ? obj.income7_rate
          : obj.cos == 0
          ? 0
          : parseFloat((obj.income7 / obj.cos).toFixed(2));
        obj.profit = obj.profit
          ? obj.profit.toFixed(2)
          : (obj.income - obj.divide - obj.cos).toFixed(2);
        obj.pay_nums = obj.pay_nums ? obj.pay_nums : obj.pays;
      });
    },
    getWyState() {
      return new Promise((resolve, reject) => {
        let queryObj = {
          sdate: this.query.startDate,
          edate: this.query.endDate,
        };
        this.$api.wyChannelData(queryObj).then((res) => {
          if (res.code == "0") {
            res.data.forEach(function (obj, i) {
              obj.index = i + 1;
            });
            resolve(res.data);
          }
        });
      });
    },
    getWebState() {
      return new Promise((resolve, reject) => {
        let queryObj = {
          date_e: this.query.endDate,
          date_s: this.query.startDate,
        };
        this.$api.webChannelData(queryObj).then((res) => {
          if (res.code == "101") {
            res.data.forEach(function (obj, i) {
              obj.index = i + 1;
            });
            resolve(res.data);
          }
        });
      });
    },
  },
};
</script>
<style lang='stylus' scoped>
body {
}
</style>
